<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Page Title</title>
    </head>
    <body>
        <span id="dot"></span>
    </body>
    <style>
        #dot {
            height: 60px;
            width: 60px;
            background-color: rgba(255, 0, 0, 0.5);
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        body {
            margin: 0;
        }
    </style>

    <script>
        var dot = document.getElementById('dot');
        function on_data(e) {
            let json = JSON.parse(e.data);
            let t = json.event_type;
            if (t === 'mouse_moved') {
                // I needed a  little offset to center the circle
                dot.style.left = (json.x - 30) + "px";
                dot.style.top = (json.y - 50) + "px";
            }
        }

        function start_websocket() {
            var ws = new WebSocket("ws://localhost:16899/");

            ws.onmessage = on_data;            ws.onmessage = on_data;
            ws.onerror = (e) => console.log("WebSocket error: " + e);

            ws.onclose = () => {
                // connection closed, discard old websocket and create a new one in 2s
                ws = null;
                setTimeout(startWebsocket, 2000);
            };
        }

        start_websocket();
    </script>
</html>
